<template>
	<transition name="fade">
		<div class="warp">
			<div class="toast" v-if="visible">{{ content }}</div>
		</div>
	</transition>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
			content: '',
			time: 3000
		};
	},
	mounted() {
		this.close();
	},
	methods: {
		close() {
			var time = setTimeout(() => {
				this.visible = false
				clearTimeout(time)
			}, this.time)
		}
	}
};
</script>

<style scoped lang="scss">
.warp {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	.toast {
		max-width: 630upx;
		min-height: 140upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36upx;
		color: #333;
		line-height: 1;
		box-shadow: 0 0 2px #EBEBEB;
	}
}
</style>
